
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"/>
    <meta name="renderer" content="webkit" />

    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <meta name="format-detection" content="telephone=no" />
    <meta http-equiv="Expires" content="-1"/>

    <meta http-equiv="Cache-Control" content="no-cache"/>
    <meta http-equiv="Pragma" content="no-cache"/>
    <title>test</title>
    <link rel="shortcut icon" href="/favicon.ico"/>

    <script type="text/javascript" src="../dist/js/vue/vue.js"></script>

</head>
<body>

<style type="text/css">
  *{
    padding: 0;
    margin: 0;
  }
  .content{
    padding: 10px;
  }
</style>

<div class="content">
    <p>vue</p>
    <div id="vue">
        <span v-for="item in items">
          {{ item.name }}
        </span>
        <span v-show="show2" @click="showHide" ref="span">
          ( span v-show 02 ....) --> component01
        </span>
        <component01 message="hello" :_show="show"></component01>
    </div>
    <br/>

</div>

<script>
  (function () {
      'use strict';

      Vue.component('component01', {
        props: ['message','_show'],
        template: '<div v-show="_show">A custom component {{message}}! -> {{_show}}</div>'
      });
      var app = new Vue({
        el: '#vue',
        data: {
          messages: 'aadsfsad',
          title: 'aaaaaaa',
          show: true,
          show2: true,
          items: [
            {name: 'aaa'},
            {name: 'bbb'},
          ],
          message: 'ssssssss'
        },
        methods: {
          showHide: function (){
            console.log(this.$refs);

            var is = this.show == true;
            if(is){
              this.show = false;
            }else{
              this.show = true;
            }
          }
        },
      });

    }());
</script>


</body>
</html>
